<template>
    <div class="box">
        <div class="title">合同</div>
        <div class="container">
            <div class="container_title">
                <FormItems
                    ref="form"
                    v-model="formData"
                    :form="formList"
                    :state="state"
                >
                </FormItems>
            </div>
            <div class="container_content">
                <div v-if="formData.contractTemplateSchemeType == 1">
                    <el-form ref="form" :model="formData" label-width="80px">
                        <el-form-item
                            label="合同模板"
                            :rules="[
                                {
                                    required: true,
                                    message: '请选择合同模板',
                                    trigger: 'change',
                                },
                            ]"
                        >
                            <el-select
                                v-model="formData.region"
                                placeholder="请选择合同模板"
                            >
                                <el-option
                                    label="区域一"
                                    value="shanghai"
                                ></el-option>
                            </el-select>
                            <el-button type="text" style="margin-left: 15px"
                                >查看</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
                <div v-if="formData.contractTemplateSchemeType == 2">
                    <el-form ref="form" :model="formData" label-width="80px">
                        <div class="templateBox">
                            <el-form-item
                                label="公司标准模板"
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择公司标准模板',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <el-select
                                    v-model="formData.region"
                                    placeholder="请选择公司标准模板"
                                >
                                    <el-option
                                        label="区域一"
                                        value="shanghai"
                                    ></el-option>
                                </el-select>
                                <el-checkbox
                                    v-model="formData.checked"
                                    style="margin-left: 15px"
                                    >仅适用于此额度申请</el-checkbox
                                >
                            </el-form-item>
                        </div>
                        <div class="container_content_title">相关配置</div>
                        <div>
                            <div class="config_box">
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 超期未还车：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    超期未还车日租金： 原日租金的
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    %
                                </el-form-item>
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请输入单价',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 异地还车：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    单价：
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    元/公里
                                </el-form-item>
                                <el-form-item
                                    class="cspan2"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span>
                                                逾期规则（租金、超里程费等其他应付款项）：</span
                                            >
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    <el-radio-group v-model="radio">
                                        <el-radio :label="3">
                                            逾期规则：
                                            <el-input-number
                                                :min="1"
                                                :max="100"
                                                step-strictly
                                                v-model="formData.region"
                                                class="input-number"
                                                size="mini"
                                            >
                                            </el-input-number>
                                            天未付款
                                        </el-radio>
                                        <el-radio :label="9">
                                            逾期规则：
                                            <el-input-number
                                                :min="1"
                                                :max="100"
                                                step-strictly
                                                v-model="formData.region"
                                                class="input-number"
                                                size="mini"
                                            >
                                            </el-input-number>
                                            日前未付款
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 超里程费：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    单价：
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    元/公里
                                </el-form-item>
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 滞纳金：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    计费规则： 逾期金额的
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    %
                                </el-form-item>
                                <el-form-item
                                    class="span3"
                                    :rules="[
                                        {
                                            required: true,
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 提前还车：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    <el-table :data="[[]]" style="width: 100%">
                                        <el-table-column
                                            prop="date"
                                            label="提前还车原因"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                <el-select
                                                    v-model="value1"
                                                    placeholder="请选择"
                                                    clearable
                                                    filterable
                                                >
                                                    <el-option
                                                        v-for="item in []"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                    >
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            label="已履行租期（月）"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                <el-checkbox
                                                    style="margin-right: 20px"
                                                    v-model="checked"
                                                ></el-checkbox>
                                                <el-input-number
                                                    :min="1"
                                                    :max="100"
                                                    step-strictly
                                                    v-model="formData.region"
                                                    class="input-number"
                                                    size="mini"
                                                >
                                                </el-input-number>
                                                -
                                                <el-input-number
                                                    :min="1"
                                                    :max="100"
                                                    step-strictly
                                                    v-model="formData.region"
                                                    class="input-number"
                                                    size="mini"
                                                >
                                                </el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="address"
                                            label="违约金比例"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                剩余未履行租赁期应支付租金总额的
                                                <el-input-number
                                                    :min="1"
                                                    :max="100"
                                                    step-strictly
                                                    v-model="formData.region"
                                                    class="input-number"
                                                    size="mini"
                                                >
                                                </el-input-number>
                                                %
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="address"
                                            label=""
                                            align="center"
                                            width="100px"
                                        >
                                            <template slot-scope="scope">
                                                <el-button
                                                    type="text"
                                                    icon="el-icon-delete"
                                                ></el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>

                                    <div class="btn">
                                        <i class="el-icon-plus"></i>
                                        <span>添加规则</span>
                                    </div>
                                </el-form-item>
                            </div>
                            <div class="remake">
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                    label="特殊约定："
                                >
                                    <el-input
                                        type="textarea"
                                        placeholder="请输入特殊约定"
                                        v-model="value1"
                                        maxlength="1000"
                                        show-word-limit
                                        :autosize="{ minRows: 4, maxRows: 4 }"
                                        resize="none"
                                    >
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div class="remake">
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                    label="说明："
                                >
                                    <el-input
                                        type="textarea"
                                        placeholder="请输入说明"
                                        v-model="value1"
                                        maxlength="500"
                                        show-word-limit
                                        :autosize="{ minRows: 4, maxRows: 4 }"
                                        resize="none"
                                    >
                                    </el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form>
                </div>
                <div v-if="formData.contractTemplateSchemeType == 3">
                    <el-form ref="form" :model="formData" label-width="80px">
                        <div class="templateBox">
                            <el-form-item
                                label="客户公司合同模板"
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择公司标准模板',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <ContractTemplateUpload
                                    :limit="1"
                                    :uploadType="2"
                                ></ContractTemplateUpload>
                                <el-checkbox
                                    v-model="formData.checked"
                                    style="margin-left: 5px"
                                    >仅适用于此额度申请</el-checkbox
                                >
                            </el-form-item>
                        </div>
                        <div class="container_content_title">相关配置</div>
                        <div>
                            <div class="config_box">
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 超期未还车：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    超期未还车日租金： 原日租金的
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    %
                                </el-form-item>
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请输入单价',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 异地还车：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    单价：
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    元/公里
                                </el-form-item>
                                <el-form-item
                                    class="cspan2"
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span>
                                                逾期规则（租金、超里程费等其他应付款项）：</span
                                            >
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    <el-radio-group v-model="radio">
                                        <el-radio :label="3">
                                            逾期规则：
                                            <el-input-number
                                                :min="1"
                                                :max="100"
                                                step-strictly
                                                v-model="formData.region"
                                                class="input-number"
                                                size="mini"
                                            >
                                            </el-input-number>
                                            天未付款
                                        </el-radio>
                                        <el-radio :label="9">
                                            逾期规则：
                                            <el-input-number
                                                :min="1"
                                                :max="100"
                                                step-strictly
                                                v-model="formData.region"
                                                class="input-number"
                                                size="mini"
                                            >
                                            </el-input-number>
                                            日前未付款
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 超里程费：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    单价：
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    元/公里
                                </el-form-item>
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 滞纳金：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    计费规则： 逾期金额的
                                    <el-input-number
                                        :min="1"
                                        :max="100"
                                        step-strictly
                                        v-model="formData.region"
                                        class="input-number"
                                        size="mini"
                                    >
                                    </el-input-number>
                                    %
                                </el-form-item>
                                <el-form-item
                                    class="span3"
                                    :rules="[
                                        {
                                            required: true,
                                        },
                                    ]"
                                >
                                    <template #label>
                                        <div class="config_box-label">
                                            <span> 提前还车：</span>
                                            <e-switch
                                                v-model="formData.region"
                                            ></e-switch>
                                        </div>
                                    </template>
                                    <el-table :data="[[]]" style="width: 100%">
                                        <el-table-column
                                            prop="date"
                                            label="提前还车原因"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                <el-select
                                                    v-model="value1"
                                                    placeholder="请选择"
                                                    clearable
                                                    filterable
                                                >
                                                    <el-option
                                                        v-for="item in []"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                    >
                                                    </el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="name"
                                            label="已履行租期（月）"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                <el-checkbox
                                                    style="margin-right: 20px"
                                                    v-model="checked"
                                                ></el-checkbox>
                                                <el-input-number
                                                    :min="1"
                                                    :max="100"
                                                    step-strictly
                                                    v-model="formData.region"
                                                    class="input-number"
                                                    size="mini"
                                                >
                                                </el-input-number>
                                                -
                                                <el-input-number
                                                    :min="1"
                                                    :max="100"
                                                    step-strictly
                                                    v-model="formData.region"
                                                    class="input-number"
                                                    size="mini"
                                                >
                                                </el-input-number>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="address"
                                            label="违约金比例"
                                            align="center"
                                        >
                                            <template slot-scope="scope">
                                                剩余未履行租赁期应支付租金总额的
                                                <el-input-number
                                                    :min="1"
                                                    :max="100"
                                                    step-strictly
                                                    v-model="formData.region"
                                                    class="input-number"
                                                    size="mini"
                                                >
                                                </el-input-number>
                                                %
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="address"
                                            label=""
                                            align="center"
                                            width="100px"
                                        >
                                            <template slot-scope="scope">
                                                <el-button
                                                    type="text"
                                                    icon="el-icon-delete"
                                                ></el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>

                                    <div class="btn">
                                        <i class="el-icon-plus"></i>
                                        <span>添加规则</span>
                                    </div>
                                </el-form-item>
                            </div>

                            <div class="remake">
                                <el-form-item
                                    :rules="[
                                        {
                                            required: true,
                                            message: '请选择公司标准模板',
                                            trigger: 'change',
                                        },
                                    ]"
                                    label="说明："
                                >
                                    <el-input
                                        type="textarea"
                                        placeholder="请输入说明"
                                        v-model="value1"
                                        maxlength="500"
                                        show-word-limit
                                        :autosize="{ minRows: 4, maxRows: 4 }"
                                        resize="none"
                                    >
                                    </el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </el-form>
                </div>
                <div v-if="formData.contractTemplateSchemeType == 4">
                    <el-form ref="form" :model="formData" label-width="80px">
                        <div class="templateBox">
                            <el-form-item
                                label="合同模板"
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择公司标准模板',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <el-select
                                    v-model="formData.region"
                                    placeholder="请选择合同模板"
                                >
                                    <el-option
                                        label="区域一"
                                        value="shanghai"
                                    ></el-option>
                                </el-select>
                                <el-checkbox
                                    v-model="formData.checked"
                                    style="margin-left: 15px"
                                    >仅适用于此额度申请</el-checkbox
                                >
                            </el-form-item>
                        </div>
                        <div class="templateBox">
                            <el-form-item
                                label="使用客户"
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择公司标准模板',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <el-input
                                    :placeholder="'请选择客户'"
                                ></el-input>
                            </el-form-item>
                        </div>
                        <div class="remake">
                            <el-form-item
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择公司标准模板',
                                        trigger: 'change',
                                    },
                                ]"
                                label="说明："
                            >
                                <el-input
                                    type="textarea"
                                    placeholder="请输入说明"
                                    v-model="value1"
                                    maxlength="500"
                                    show-word-limit
                                    :autosize="{ minRows: 4, maxRows: 4 }"
                                    resize="none"
                                >
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import FormItems from "@/views/finance/manage/formItems/index.vue";
import FormItem from "@/views/finance/reimburs/formItem/index.vue";
import ContractTemplateUpload from "@/components/FileUpload/contractTemplateUpload.vue";
export default {
    components: { FormItems, FormItem, ContractTemplateUpload },
    props: {
        value: {
            required: false,
        },
        state: {
            required: false,
        },
    },
    inject: ["dicts"],
    data() {
        return {
            value1: "",
            // formList: [],
        };
    },

    computed: {
        formData: {
            get() {
                return this.useVModel.call(this);
            },
            set(val) {
                this.$emit("input", val);
            },
        },
        dict() {
            return this.dicts();
        },
        contract_template_edit_type() {
            return this.dict?.type?.contract_template_edit_type.filter(
                (item) => item.value != 1
            );
        },
        formList() {
            return [
                {
                    label: "合同模板方案",
                    type: "radioGroup",
                    radioGroupList: this.contract_template_edit_type,
                    prop: "contractTemplateSchemeType",
                    rules: [
                        {
                            required: true,
                            message: "合同模板方案",
                            trigger: "change",
                        },
                    ],
                },
            ];
        },
    },

    created() {
        // this.init();
    },
    mounted() {},
    methods: {
        init() {
            this.formList = [
                {
                    label: "买卖合同模板",
                    type: "select",
                    selectList: [],
                    prop: "b",
                },
                {
                    label: "担保合同模板",
                    type: "select",
                    selectList: [],
                    prop: "c",
                },
            ];
        },
    },
};
</script>

<style lang="scss" scoped>
.box {
    margin: 20px;
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    .title {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
        padding-bottom: 15px;
        border-bottom: 1px solid #e9e9e9;
    }
}
.config_box {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    margin-top: 10px;
    ::v-deep .el-form-item {
        display: flex;
        flex-direction: column;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 4px;
        border: 1px solid #dadada;
    }
    ::v-deep .el-form-item__label {
        text-align: left;
        margin-bottom: 8px;
        width: 100% !important;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #464646;
        line-height: 22px;
        display: flex;
    }
    ::v-deep .el-form-item__content {
        margin-top: 20px;
        margin-left: 0 !important;
    }
    .config_box-label {
        flex: 1;
        display: flex;
        justify-content: space-between;
    }
    ::v-deep .el-date-editor {
        width: 100%;
        max-width: 300px;
    }

    ::v-deep .el-input {
        width: 100%;
        max-width: 300px;
    }
    ::v-deep .el-select {
        width: 100%;
        max-width: 300px;
    }
    ::v-deep .el-textarea {
        width: 100%;
        max-width: 300px;
    }
    ::v-deep .el-radio-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}
::v-deep .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase {
        display: none;
    }
    input {
        padding: 5px;
        text-align: left;
    }
}
.input-number {
    width: 60px;
}
.container_content_title {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #464646;
}
.templateBox {
    ::v-deep .el-form-item {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    ::v-deep .el-form-item__label {
        text-align: left;
        margin-bottom: 8px;
        width: 100% !important;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #464646;
        line-height: 22px;
        display: flex;
    }
    ::v-deep .el-form-item__content {
        margin-top: 10px;
        margin-left: 0 !important;
    }
}
.remake {
    ::v-deep .el-form-item {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    ::v-deep .el-form-item__label {
        text-align: left;
        margin-bottom: 8px;
        width: 100% !important;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #464646;
        line-height: 22px;
        display: flex;
    }
    ::v-deep .el-form-item__content {
        margin-top: 10px;
        margin-left: 0 !important;
    }
}
.cspan2 {
    grid-row-start: span 2;
}
.span3 {
    grid-column-start: span 3;
}
.btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #dadada;
    color: #1890ff;
    margin-top: 15px;
    font-size: 14px;
}
</style>
